<script setup>
import { ref, reactive, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { request } from "../../../common/http";
import { ApiUrl } from "../../../common/ApiUrl";
import { Toast } from "@/utils";
import { formatUTCDateToCustomFormat } from "@/utils/date";
import { useOrderStore } from "@/store/order";
import { storeToRefs } from "pinia";

const orderStore = useOrderStore();
const { order } = storeToRefs(orderStore);
let orderId = ref(null);
let orderList = ref([]);
const orderThead = ref(["货道", "商品名称", "出货状态", "出货时间"])
const orderStatus = reactive({
	0: "出货失败",
	1: "出货成功",
	2: "等待取货",
	3: "线下取货中",
	4: "超时",
	5: "等待出货",
	6: "线下取货成功",
	7: "退款成功",
	8: "网络延时"
})

onLoad((query) => {
	orderId.value = query.id;
})

onMounted(() => {
	/* 获取订单详情列表页数据 */
	getOrderList();
})

/* 获取订单详情列表页数据 */
const getOrderList = () => {
	request({
		url: `${ApiUrl.OrderUrl}?orderId=${orderId.value}`,
	}).then(res => {
		if (res.status == 0) {
			orderList.value = res.data;
		} else {
			Toast(res.msg || "网络异常", "error");
		}
	})
}
</script>

<template>
  <view class="order_detail">
		<view class="order_wrap">
			<view class="title">订单交易详情</view>
			<view class="order_info">
				<view class="order_row">
					<text>支付单号：</text>
					<text>{{ order.payChannelOrderNo }}</text>
				</view>
				<view class="order_row">
					<text>支付通道：</text>
					<text>{{ order.channelType == 1 ? "微信" : order.channelType == 2 ? "支付宝" : "" }}</text>
				</view>
				<view class="order_row">
					<text>商户号：</text>
					<text>{{ order.merchantId }}</text>
				</view>
				<view class="order_row">
					<text>机器编号：</text>
					<text>{{ order.machineNo }}</text>
				</view>
				<view class="order_row">
					<text>订单金额：</text>
					<text>{{ order.totalAmount }}元</text>
				</view>
				<view class="order_row">
					<text>总成本：</text>
					<text>{{ order.costPrice }}</text>
				</view>
				<view class="order_row">
					<text>购买数量：</text>
					<text>{{ order.goodsNum }}</text>
				</view>
				<view class="order_row">
					<text>下单时间：</text>
					<text>{{ formatUTCDateToCustomFormat(order.createTime) }}</text>
				</view>
				<view class="order_row">
					<text>完成时间：</text>
					<text>{{ formatUTCDateToCustomFormat(order.gmtPayTime) }}</text>
				</view>
				<view class="order_row">
					<text>客户ID：</text>
					<text>{{ order.customerName }}</text>
				</view>
			</view>
		</view>
    <view class="order_list">
			<view class="thead">
				<text v-for="(item, index) in orderThead" :key="index">{{ item }}</text>
			</view>
			<view class="tbody">
				<view class="tbody_item" v-for="(item, index) in orderList" :key="index">
					<text>{{ item.channelIndex }}</text>
					<text>{{ item.goodsName }}</text>
					<text v-if="item.orderStatus < 9">{{ orderStatus[item.orderStatus] }}</text>
					<text v-else>
						{{ 
							item.message == "check motor default" ? "电机未接好" : 
							item.message == "reback signal error" ? "电机反馈失败" :
							item.message == "motor overtime" ? "电机反馈超时" :
							item.message == "motor short of time" ? "电机反馈秒回" : "出货成功"
						}}
					</text>
					<text>{{ formatUTCDateToCustomFormat(item.outPutTime) }}</text>
				</view>
			</view>
		</view>
  </view>
  <!-- <view class="table bg-white">
    <uni-table border stripe empty-text="无数据">
      <uni-tr>
        <uni-th align="center">货道</uni-th>
        <uni-th align="center">商品名称</uni-th>
        <uni-th align="center">出货状态</uni-th>
        <uni-th align="center">出货时间</uni-th>
      </uni-tr>
      <uni-tr>
        <uni-td>28</uni-td>
        <uni-td>卡农尼-烤薯片</uni-td>
        <uni-td>出货成功</uni-td>
        <uni-td>2024-06-21 15:56</uni-td>
      </uni-tr>
    </uni-table>
  </view> -->
</template>

<style lang='scss'>
.order_detail {
	box-sizing: border-box;
	padding: 24rpx 0;
	.order_wrap {
		width: 686rpx;
		background: #ffffff;
		border-radius: 8rpx;
		margin: 0 auto 24rpx;
		.title {
			position: relative;
			padding: 22rpx 0 22rpx 26rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #303030;
			line-height: 38rpx;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EBEEF1;
			&::before {
				position: absolute;
				left: 0;
				content: "";
				width: 6rpx;
				height: 40rpx;
				background: #FF4638;
				border-radius: 3rpx;
			}
		}
		.order_info {
			width: 100%;
			box-sizing: border-box;
			padding: 28rpx 32rpx;
			.order_row {
				display: flex;
				align-items: center;
				&:not(:last-child) {
					margin-bottom: 12rpx;
				}
				text {
					display: block;
					font-size: 24rpx;
					line-height: 36rpx;
					color: #303030;
					&:nth-child(1) {
						color: #969699;
					}
				}
			}
		}
	}
	.order_list {
		.thead {
			width: 750rpx;
			background: #FF766C;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 18rpx 0;
			text {
				font-weight: 500;
				font-size: 20rpx;
				line-height: 23rpx;
				color: #ffffff;
				display: flex;
				justify-content: center;
				box-sizing: border-box;
				&:not(:last-child) {
					border-right: 4rpx solid #FFE5E5;
				}
				&:nth-child(1) {
					width: 130rpx;
				}
				&:nth-child(2) {
					width: 220rpx;
				}
				&:nth-child(3) {
					width: 100rpx;
				}
				&:last-child {
					flex: 1;
				}
			}
		}
		.tbody {
			.tbody_item {
				width: 750rpx;
				background: #ffffff;
				display: flex;
				box-sizing: border-box;
				padding: 18rpx 0;
				text {
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 20rpx;
					text-align: center;
					color: #3B3D3D;
					&:nth-child(1) {
						width: 130rpx;
					}
					&:nth-child(2) {
						width: 220rpx;
					}
					&:nth-child(3) {
						width: 100rpx;
					}
					&:last-child {
						flex: 1;
					}
				}
			}
		}
	}
}
</style>